<template>
  <div>
        <van-nav-bar
  title="提交请假登记"
  left-text="返回"
  left-arrow
  @click-left="router.push('/')"
/>
    <div class="banner">
      <div class="money">
        <div class="money_box">

          <span v-if="userInfos.userinfo.user.consumeBalance">{{userInfos.userinfo.user.consumeBalance.toFixed(2)}}</span>
          <span v-else>0</span>
          <p>充值余额</p>
        </div>
      </div>
      <div class="box1">
        <van-button type="primary" round @click="router.push('/pay')">余额充值</van-button>
      </div>
      <div class="box1">
        <van-button type="primary" round @click="router.push('/order')">订单查询</van-button>
      </div>
      </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {onMounted} from 'vue'
import { userIds } from "@/stores/counter";
import { getInfo } from '@/model/until'
import userFlag from '@/hooks/unti'
import userFlags from '@/hooks/un'
userFlag()
let userInfos = userIds()
let router = useRouter()
onMounted(async () => {
  let token = window.localStorage.getItem("token");
  if (token) {
    await getInfo({},{Authorization:window.localStorage.getItem('token')}).then(res=>{
      userInfos.changeInfo(res.data.user)
    })
  }
});

userFlags()
</script>

<style lang="scss" scoped>
.banner{
  width:100%;
  height: 100vh;
  background: url('https://img0.baidu.com/it/u=46072741,2684955685&fm=253&fmt=auto&app=138&f=JPEG?w=329&h=500') no-repeat;
  background-size: cover;
  background-position:center ;
}
.money{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  .money_box{
    width: 100px;
    text-align: center;
    span{
      display: inline-block;
      margin-bottom: 20px;
      font-size: 30px;
    }
  }
}
button{
  width: 100%;
}
.box1{
  padding: 20px;
}
</style>